<template>
    <div class="more_blog">
        <div class="title">
            最近
        </div>
        <div class="blog_list">
            <el-timeline>
                <el-timeline-item 
                    placement="top" color='#0bbd87' 
                    :timestamp="dateFormat(item.init_date)" 
                    v-for="(item,index) in blogList" :key="index">
                    <router-link 
                        :to="'/bloginfo/'+item.id" 
                        class="item" 
                        :target="newWindow?'_blank':''"> 
                        {{item.title}}
                    </router-link>
                </el-timeline-item>
            </el-timeline>
        </div>
    </div>
</template>

<script>
//阅读更多博客
import DateTool from '~/common/DateTool';
export default { 
    name: 'MoreBlog',
    props:{
        newWindow:{  //路由跳转时是否开启新窗口
            type:Boolean,
            default:true,
        },
    },
    data(){
        return{
            blogList:[],
        };
    },
    methods:{
        getLatelyBlogs(){
            this.$axios.$Api.getLatelyBlogs().then(data=>{
                this.blogList = data;
            }).catch(()=>{
                return ;
            });
        },
        dateFormat(data){
            return DateTool.dateFormatByTimestamp(data);
        },
    },
    created(){
        if (!process.client) return;
        if(this.blogList.length>0) return;
        this.getLatelyBlogs();
    },
}
</script>

<style scoped lang="scss">
ul{
    padding: 0;
    margin: 0;
}
.more_blog{
    border-radius: 0.2rem;
    text-align: left;
    box-sizing: border-box;
    >.title{
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 3rem;
    }
    >.blog_list{
        font-size: 1.7rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1.5rem;
        /deep/.el-timeline-item {
            padding-bottom: 1.5rem;
        }
        /deep/.el-timeline-item__wrapper {
            padding-left: 2rem;
        }
        .item{
            font-size: 1.3rem;
            font-weight: bold;
            color: #456578;
            line-height: 1.2;
        }
    }
}
</style>